import { PropType } from 'vue';
import { IOption, MciSelect } from '../Select';

export const SelectOfList = defineComponent({
  name: 'SelectOfList',
  props: {
    options: {
      type: Array as PropType<IOption[]>,
      default: () => []
    },
    modelValue: {
      type: [String, Number, Array],
      default: ''
    }
  },
  emits: ['update:modelValue'],
  setup(props, { emit }) {
    const value = ref(props.modelValue);
    const changeHandle = () => {
      emit('update:modelValue', value.value);
    };

    watchEffect(() => {
      value.value = props.modelValue;
    });

    return () => (
      <MciSelect
        v-model={value.value}
        filterable
        multiple
        allowCreate
        defaultFirstOption
        list={props.options}
        class="w-full"
        onChange={changeHandle}
      />
    );
  }
});
